<template>
	<view class="uni-container" style="padding: 0;">
		<match-media :min-width="MAX_SIZEiZE">
			<navBar></navBar>
		</match-media>
		<match-media :max-width="MAX_SIZEiZE - 1">
			<cu-custom :title="query.name" :goBack="backPage"></cu-custom>
		</match-media>
		<!-- <match-media :max-width="MAX_SIZEiZE">
			<tabBar :showselected="true" ref="tabBar"></tabBar>
		</match-media> -->
		<match-media :max-width="MAX_SIZEiZE - 1">
			<view class="max-contetn">
				<view class="game-main">
					<view class="row">
						<view class="col-5">
							<view class="ac_coupon-wrap">
								<image class="ac_coupon-content" :src="query.gamepic"></image>
							</view>
						</view>
						<view class="col-7">
							<view class="title">{{ query.name }}</view>
							<view class="gameType">{{ query.namecode }}</view>
							<view class="favoriteContainer">
								<waves class="favoriteBox" :wavesHover="false" @onTap="clickFavorite"> <uni-icons
										custom-prefix="iconfont"
										:type="query.is_collect == 0? 'icon-aixin' : 'icon-aixin_shixin'"
										:color="query.is_collect == 0? '#fff' : '#ff292c'" size="20"></uni-icons>
									<text class="favoriteText"></text> Favorite
								</waves>
							</view>
						</view>
					</view>
					<view class="row">
						<waves class="q-btn" @onTap="startGame(1,'_self')">
							<uni-icons custom-prefix="iconfont" type="icon-bofang" color="#fff" size="20"></uni-icons>
							<text class="realPlay">Real Play</text>
						</waves>
						<!-- #ifdef H5 -->
						<!-- <waves class="q-btn" @onTap="startGame(1,'_blank')"> <uni-icons custom-prefix="iconfont"
								type="icon-bofang" color="#fff" size="20"></uni-icons>
							<text class="realPlay">Real Play2</text>
						</waves> -->
						<!-- #endif -->
					</view>
				</view>
			</view>
		</match-media>
		<match-media :min-width="MAX_SIZEiZE">
			<view class="min-content">
				<view class="pc-back" @click="backPage">
					<view class="back-cont">
						<view class="back-icon"> </view>
						<view class="back-text"> {{$t('Page.notify.back')}} </view>
					</view>
					<text class="page-title">{{query.name}}</text>
				</view>
				<view class="game-main">
					<view class="liveGame__PC">
						<template v-if="isStartGame">
							<iframe :src="query.url" class="iframe" style="border: medium none;"></iframe>
						</template>
						<template v-else>
							<view class="mask-bg"> </view>
							<view class="overlay">
								<waves class="q-btn" @onTap="startGame(2)">
									<uni-icons custom-prefix="iconfont" type="icon-bofang" color="#fff"
										size="20"></uni-icons>
									<text class="realPlay">Real Play</text>
								</waves>
							</view>
						</template>
					</view>

					<view class="liveGame__Bottom">
						<waves @onTap="clickFavorite" class="favoriteBox" :wavesHover="false"> <uni-icons
								custom-prefix="iconfont"
								:type="query.is_collect == 0? 'icon-aixin' : 'icon-aixin_shixin'"
								:color="query.is_collect == 0? '#fff' : '#ff292c'" size="20"></uni-icons>
							<text class="favoriteText"></text> Favorite
						</waves>
						<view class="right-icon">
							<waves class="full-screen-icon" :wavesHover="false" @onTap="toggleFullscreen">
								<uni-icons custom-prefix="iconfont" type="icon-full-screen" size="16"
									color="#fff"></uni-icons>
							</waves>
						</view>
					</view>
				</view>
			</view>
		</match-media>
		<uni-popup ref="logout" type="center" :is-mask-click="false">
			<view class="popup-cont">
				<view class="tips">
					{{ $t('Page.home.qrtcm') }}
				</view>
				<view class="btns">
					<waves class="btn cancel" @onTap="handlePopup('close')">
						{{ $t('Page.mine.cancel') }}
					</waves>
					<waves class="btn confirm" @onTap="confrim">
						{{ $t('Page.mine.confirm') }}
					</waves>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import cuCustom from '@/components/cu-custom/cuCustom.vue'
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'

	import {
		sendMessage
	} from '@/api/websocket.js'

	import {
		timeFormat
	} from '@/utils/function/index.js'
	import {
		mapActions,
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		components: {
			cuCustom
		},
		data() {
			return {
				timeFormat,
				MAX_SIZEiZE,
				query: {},
				isStartGame: false,
				total: 0,
				page: 0,
				// total2: 0,
				headers: {
					gameName: 'Game',
					betTime: 'Time',
					validAmount: 'Bet Amount',
					settledAmount: 'PayOut',
				},
				tableData: [],
				show: false,
				enablePullDownRefresh: false,
			}
		},
		onLoad(option) {
			console.log("option: ", option.gameParams);
			this.query = JSON.parse(decodeURIComponent(option.gameParams))
			console.log("this.query: ", this.query);
			if (this.recycleTime && this.token) {
				this.saveRecycleTime(false)
			}
			this.saveGamePage(true)
			this.pageInit()
		},

		onUnload() {
			// console.log('离开页面')
			if (!this.recycleTime && this.token) {
				// console.log('离开Game页面')
				this.getRecycle(false)
			}
		},
		computed: {
			...mapState({
				recycleTime: state => state.app.recycleTime,
				token: state => state.app.token
			})
		},
		methods: {
			...mapActions('app', ['getRecycle']),
			...mapMutations('app', ['saveRecycleTime', 'saveGamePage']),
			toggleFullscreen() {
				const element = document.querySelector('.liveGame__PC');
				if (document.fullscreenElement) {
					// 如果已经是全屏状态，则退出全屏
					document.exitFullscreen()
						.catch(err => console.error('Exit fullscreen error:', err));
				} else {
					// 否则，进入全屏
					if (element.requestFullscreen) {
						element.requestFullscreen();
					} else if (element.mozRequestFullScreen) {
						/* Firefox */
						element.mozRequestFullScreen();
					} else if (element.webkitRequestFullscreen) {
						/* Chrome, Safari and Opera */
						element.webkitRequestFullscreen();
					} else if (element.msRequestFullscreen) {
						/* IE/Edge */
						element.msRequestFullscreen();
					}
				}
			},
			handlePopup(flag) {
				this.$refs.logout[flag]('center')
			},
			backPage() {
				if (this.isStartGame) {
					this.handlePopup('open')
				} else {
					this.handleBack()
				}
			},
			handleBack() {
				let canNavBack = getCurrentPages();
				console.log("canNavBack: ", canNavBack);
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
			confrim() {
				this.handleBack()
				this.handlePopup('close')
				this.isStartGame = false
			},
			pageInit() {
				this.callGamelog()
			},
			changeReceive(e) {
				this.callGamelog()
			},
			callGamelog() {
				const {
					GAMELOG
				} = this.$api
				sendMessage({
					flag: GAMELOG,
					content: {
						page: this.page,
						dealstatus: -1,
						gameName: this.query.game_name
					}
				})
				uni.$once(GAMELOG, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.total = data.count
						this.tableData = data.list
					}
				})
			},
			clickFavorite() {
				console.log(parseInt(this.query.is_collect))
				const {
					DEALCOLLECT
				} = this.$api
				sendMessage({
					flag: DEALCOLLECT,
					content: {
						game_id: this.query.id,
						status: parseInt(this.query.is_collect) ? 2 : 1
					}
				})
				uni.$once(DEALCOLLECT, (res) => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code === 1) {
						this.query.is_collect = parseInt(this.query.is_collect) ? 0 : 1
					}
					console.log(this.query.is_collect)
				})
			},
			startGame(type, target) {
				if (type === 1) {
					// #ifdef H5 
					uni.navigateTo({
						url: '/pages/public/gameWebview' + '?url=' + encodeURIComponent(this.query.url)
					})
					// #endif
					// #ifdef APP
					uni.navigateTo({
						url: '/pages/public/gameWebview' + '?url=' + encodeURIComponent(this.query.url)
					})
					// #endif
				} else {
					this.isStartGame = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-container {
		min-height: 100vh;
		background: var(--bg-3);
		padding: 0 0px 16px;
		// padding-top: calc(var(--status-bar-height) + 66px);
		height: 100vh;
		overflow-y: auto;

	}

	.max-contetn {
		.header-title {
			padding: 16px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 700;
			font-size: 16px;
			color: #fff;

			.header-title-text {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 5px;
				border-radius: 5px;
			}
		}



		.page-title {
			width: 100%;
			margin: auto;
			height: 44px;
			line-height: 44px;
			font-size: 20px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
		}

		.left-icon {
			width: 22px;
			height: 22px;
			background: url('@/static/image/back-icon.png') no-repeat;
			background-size: contain;
		}

		.game-main {
			width: 100%;
			background-color: var(--bg-3);
			padding: 16px;

			.row {
				display: flex;
				justify-content: center;

				.col-5 {
					width: 44%;

					.ac_coupon-wrap {
						height: 0;
						padding-top: 100%;
						position: relative;

						.ac_coupon-content {
							border-radius: 16px;
							position: absolute;
							top: 0;
							width: 100%;
							height: 100%;
							background-size: cover;
						}
					}
				}

				.col-7 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding: 0 16px;
					width: 58%;

					.title {
						width: 100%;
						font-size: 18px;
						color: #FFF;
						word-break: break-all;
					}

					.gameType {
						color: #adadc2;
						font-size: 14px;
					}

					.favoriteContainer {
						margin-top: 24px;
						display: flex;
						align-items: center;
					}
				}

				.q-btn {
					flex: 1;
					margin-top: 16px;
				}
			}
		}
	}

	.min-content {
		// max-width: 1200px;
		width: 100%;
		margin: 0 auto;
		padding: 70px 30px 0;
		color: #FFF;
		height: 100vh;
		box-sizing: border-box;

		.header-title {
			display: flex;
			margin-bottom: 18px;

			.header-title-text {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 5px;
				border-radius: 5px;
			}

			.titleText {
				margin-right: 5px;

				&:first-child {
					cursor: pointer;
					color: #7c7c95;
				}
			}
		}

		.game-main {
			display: flex;
			flex-direction: column;

			.liveGame__PC {
				position: relative;
				border-radius: 16px 16px 0 0;
				overflow: hidden;
				height: calc(100vh - 170px - 104px);
				background: var(--bg-1);

				.header {
					position: absolute;
					left: 0;
					top: 0px;
					display: flex;
					align-items: center;
					background-color: rgba(36, 42, 50, .5);
					color: #fff;
					padding-right: 30rpx;
					grap: 40rpx;
					padding: 10px;
					cursor: pointer;
					z-index: 99999;
					border-radius: 0 0 16px 0;

					.backText {
						font-size: 16px;
					}
				}

				.iframe {
					border-radius: 16px 16px 0 0;
					width: 100%;
					height: 100%;
					position: absolute;
				}

				.mask-bg {
					background: url('https://win100.s3.amazonaws.com/89395025014685952.png') center top / cover no-repeat;
					width: 100%;
					height: 100%;
					position: absolute;
					filter: blur(20px);
				}

				.overlay {
					position: absolute;
					border-radius: 16px 16px 8px 8px;
					width: 100%;
					height: 100%;
					color: #adadc2;
					background: rgba(0, 0, 0, 0.3);
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.liveGame__Bottom {
				border-radius: 0 0 16px 16px;
				height: 74px;
				padding: 15px;
				background: var(--bg-5);
				display: flex;
				justify-content: space-between;
				align-items: center;

				.right-icon {
					display: flex;

					.helpIcon {
						margin-right: 8px;
					}
				}
			}
		}
	}

	.favoriteBox {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 44px;
		padding: 0px 15px;
		border-radius: 12px;
		cursor: pointer;
		margin-right: 16px;
		color: #fff;
		background: var(--bg-25);

		.favoriteText {
			margin-left: 8px;
		}
	}

	.q-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 12px;
		margin: 0px 8px;
		background: var(--bg-4);
		color: #fff;
		border-radius: 12px;
		padding: 9px 16px;
		height: 40px;
		position: relative;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);

		.realPlay {
			margin-left: 16px;
		}
	}

	.popup-cont {
		width: calc(100vw - 60px);
		background: var(--bg-38);
		opacity: .95;
		border-radius: 15px;
		padding: 30px;
		box-sizing: border-box;
		opacity: 0.95;
		display: flex;
		align-items: center;
		flex-direction: column;

		.tips {
			height: 48px;
			line-height: 48px;
			font-size: 17px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: rgba(255, 255, 255, 0.9);
			line-height: 24px;
		}

		.btns {
			display: flex;
			align-items: center;
			margin-top: 30px;

			.btn {
				min-width: 110px;
				height: 42px;
				line-height: 42px;
				text-align: center;
				border-radius: 100px;
				font-size: 16px;
				font-family: PingFang SC-Medium, PingFang SC;
				box-sizing: border-box;
				margin-right: 24px;
				cursor: pointer;

				&:last-child {
					margin-right: 0;
				}

			}

			.cancel {
				border: 2px solid var(--border-color-4);
				color: var(--color-38);
				background: var(--bg-51);
			}

			.confirm {
				background: var(--bg-13);
				box-shadow: inset 0px 4px 4px 0px varBB(--box-shadow-color-1);
				border-color: transparent;
				color: var(--color-7);
				font-weight: 600;
			}
		}

	}

	@media screen and (max-width: 768px) {
		.game-main {
			margin-top: 15px;
		}
	}

	@media screen and (min-width: 768px) {
		.pc-back {
			width: 100%;
			padding: 0 30px;
			height: 60px;
			display: flex;
			align-items: center;
			background: var(--bg-24);
			border-radius: 30px;
			margin: 10px auto 30px;
			box-sizing: border-box;
			cursor: pointer;

			.back-cont {
				display: flex;
				align-items: center;
				height: 30px;
				padding: 0 10px;
				border-radius: 100px;
				background: var(--bg-25);

				.back-icon {
					width: 13px;
					height: 11px;
					background: url('@/static/image/back-icon.png') no-repeat;
					background-size: contain;
				}

				.back-text {
					font-size: 13px;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 18px;
					margin-left: 5px;
				}
			}

			.page-title {
				width: fit-content !important;
				margin-left: 15px;
			}
		}

		.popup-cont {
			width: 315px !important;
		}
	}
</style>